<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<a href="register.html">注册</a>
			<br>
			<a href="login.html">登录</a>
			<div>
			<table>
				<tr>
					<td v-for="category in categoryList"
					v-on:click="findItemBycategoryId(category.categoryId)"
					>
						{{category.categoryName}}
					</td>
				</tr>
			</table>
			</div>
			<div>
			<table>
				<tr v-for="item in itemList">
					<td>
						<a v-bind:href="'detail.html?id='+item.itemId">
					<img v-bind:src="item.itemImage"
					width="100" height="100"
					/>
					<br>
					{{item.itemName}}
					</a>
					</td>
				</tr>
			</table>
			</div>
		</div>
	</body>
	<script>
		var config={
			el:"#app",
			data:{
				categoryList:[],
				itemList:[]
			},
			methods:{
				findCategory:function(){
					debugger;
					var serverUrl="http://localhost:1314/category/selectAll"
					var vue=this;
					axios.get(serverUrl)
					.then(function(response){
						debugger;
						vue.categoryList=response.data;
						console.log(vue.categoryList);
					})
					.catch(function(e){
						window.alert("联网失败");
						console.log(e);
					});
				},
				findItemBycategoryId:function(id){
					debugger;
					var serverUrl="http://localhost:1314"
					+"/item/findByCategoryId?id="+id;
					//F12 从console窗口中拷贝地址到浏览器中测试一下
					console.log(serverUrl);
					var vue=this;
					axios.get(serverUrl)
					.then(function(response){
						debugger;
						vue.itemList=response.data;
					})
					.catch(function(e){
						window.alert("联网失败");
						console.log(e);
					});
					
				}
			},
			mounted:function(){
				console.log("mounted()");
				this.findCategory();
				this.findItemBycategoryId(1);
			}
		}
		var vue=new Vue(config);
	</script>
</html>



